<template>
  <div>
    <div style="position: relative;">
      <img src="/static/imgs/tmpbe7.jpg" style="width: 100%; height: 400rpx;" alt="">
      <van-icon :name="musicShow?'pause-circle-o':'play-circle-o'" size="20" @tap="changeMusic" style="position: absolute; top: 200rpx; left: 50%; margin-left: -20rpx; z-index: 9;" />
    </div>
    <div class="flex-between-align" style="background: #fff; padding: 10rpx 30rpx; position:sticky; top: 0px; z-index: 99;">
      <div style="vertical-align: middle; display: flex; align-items: center;">
        <img src="/static/imgs/title.jpg" style="height: 60rpx; width: 60rpx; border-radius: 30rpx; margin-right: 20rpx;" alt="">
        <text style="color: #9c9c9c">新华社发布于2020-02-16</text>
      </div>
      <div style="width:150rpx; display: flex; justify-content: space-between;">
        <van-icon v-if="likeStatus" name="like-o" size="20" @tap="isShowLike" />
        <van-icon v-else name="like" size="20" color="red" @tap="isShowLike" />
        <van-icon v-if="starStatus" name="star-o" size="20" @tap="isShowStar" />
        <van-icon v-else name="star" size="20" color="yellow" @tap="isShowStar" />
        <van-icon name="share-o" size="20" />
        </button>
      </div>
    </div>
    <div style="padding: 20rpx; background: #fff">
      <div style="text-align: center; font-size: 40rpx;">嫦娥五号</div>
<!--      懒加载-->
      <div class="content-font">
        {{ pageText }}
      </div>
    </div>

    <van-toast id="van-toast" />

  </div>
</template>

<script>
  export default {
    name: 'articleDetail',
    data() {
      return {
        pageText: '',
        pageTextCount: 0,
        musicShow: false,
        likeStatus: true,
        starStatus: true,
        text: '嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        嫦娥五号任务被称为是目前为止系统最复杂、技术难度最大的航天工程。陪伴“嫦娥”长大的叶培建院士说给此次落月打100分；' +
          '        负责遥控操作的航天人说自己“像是开挖掘机的”“在月球刨到几捧土，挺骄傲”',
        is_save: true
      }
    },
    methods: {

      changeMusic() {
        this.musicShow = !this.musicShow
        if (this.musicShow) {
          console.log('--->>>playBackgroundAudio')
          wx.playBackgroundAudio({
            dataUrl: 'https://ibd-avatar.oss-cn-beijing.aliyuncs.com/patientManagerWeb/1607852335784690bb1_xiaoyu.mp3', // 音乐链接，目前支持的格式有 m4a, aac, mp3, wav
            title: '音乐标题', //音乐标题
          })
        } else {
          console.log('--->>>pauseBackgroundAudio')
          wx.pauseBackgroundAudio()
        }
      },

      isShowLike() {
        this.likeStatus = !this.likeStatus
      },
      isShowStar() {
        this.starStatus = !this.starStatus
      },
      /**
       * @author: @xusy
       * @date: 2020/12/13 20:31
       * @creed: 分享的接口
       */
      onShare() {
        let shareJson = this.$shareUtil({
          title: '嫦娥五号',
          path: `/pages/index/articleDetail`
        });
        console.log("分享:" + JSON.stringify(shareJson));
        return shareJson;
      },

      // onLoadTemp() {
      //   this.pageText += this.text
      // },

      // scrollHeight() {
      //   let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //   let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //   let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      //
      //   // 避免没有数据的时候 重复执行 scrollHeight > clientHeight
      //   if(scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
      //     this.loadmore();
      //   }
      // }
      /**
       * @author: @xusy
       * @date: 2020/12/10 10:59
       * @creed: 页面等待加载
       */
      pageLoading() {
        setTimeout(() => {
          wx.hideNavigationBarLoading()
          this.pageText = this.text

          wx.pageScrollTo({
            scrollTop: 200, // 滚动到页面的目标位置，单位 px
            duration: 1000 // 滚动动画的时长，单位 ms
          })

        }, 2000)
      },

      //触底响应函数
      onBottom(){
        console.log('onBottom=-----')
        this.pageTextCount += 1
        this.pageText += this.text
      },


    },


    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
      console.log('onReachBottom=-----', this.pageTextCount)
      if (this.pageTextCount < 5) {
        this.onBottom();
      } else {
        this.$toast('没有更多了！')
      }
    },
    async beforeMount() {
      this.pageLoading()
    },
    // 页面加载
    onLoad() {
      wx.showNavigationBarLoading()
      // 一个页面只会调用一次
      wx.enableAlertBeforeUnload({
        message: '该数据暂未保存，是否离开？',
        success (res) {
          console.log(res)
        },
        fail (res) {
          console.log(res)
        }
      })
    },
    // 监听页面的卸载
    onUnload() {
      // 当前处于A页面，点击返回按钮时，则将是A页面卸载、
      if (this.is_save) {
        wx.disableAlertBeforeUnload()

        // 暂停音乐
        wx.pauseBackgroundAudio()
      }
    },
    // 监听页面的隐藏
    onHide() {
      // 当从当前A页跳转到其他页面，那么A页面处于隐藏状态。
    }

    /**
     * @author: @xusy
     * @date: 2020/12/10 10:38
     * @creed: (onHide, onUnload)利用这两个生命周期可以解决的问题：
     * @remark: 防止用户快速切换页面（A->B）。导致动态设置导航栏中的文字显示出现错误
     快速切换页面可能导致A页面中的数据还未返回，致使当切换到B页面的时候A数据才返回，使得导航栏显示的文字为A页面的导航栏标题。
     （即：A页面的导航栏标题为hello，B页面的导航栏标题为world,当快速由A->B,此时虽然在B页面，但是导航栏标题显示的是hello，而不是world）
     */
  }
</script>

<style>
.content-font{
  font-size: 28rpx;
  line-height: 38rpx;
  text-indent: 56rpx; /* 缩进 */
  letter-spacing: 4rpx; /* 字体的左右间距 */
}
</style>
